import React, { lazy, Suspense } from 'react'
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'

// Suspense 和 lazy 需要配合使用  ，webpackChunkName 使用这个可以更改文件名
const Home = lazy(() => import(/*webpackChunkName:"Home*/ './Home'))
const List = lazy(() => import(/*webpackChunkName:"List"*/ './list'))

function App() {
	return (
		<BrowserRouter>
			<Link to="">Home</Link>
			<Link to="/list">List</Link>
			<Switch>
				<Suspense fallback={<div>Loading</div>}>
					<Route path="/" component={Home} exact />
					<Route path="/list" component={List} />
				</Suspense>
			</Switch>
		</BrowserRouter>
	)
}

export default App
